<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css loading存储</title>
    <script src="./main.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="app">
        <div class="h1 text-center"></div>
        <div class="loadingBox">
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading1"></div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading {
        width: 60px;
        height: 60px;
        border: 2px solid #333333;
        border-top-color: transparent;
        border-radius: 100%;
        animation: circle infinite 0.75s linear;
    }
    @keyframes circle {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }   
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading2"></div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading {
        position:relative;
        width: 60px;
        height: 60px;
        border: 2px solid #333333;
        border-top-color:rgba(0,0,0,0.1);
        border-right-color:rgba(0,0,0,0.1);
        border-bottom-color:rgba(0,0,0,0.1);
        border-radius: 100%;
        animation: circle infinite 0.75s linear;
    }
    @keyframes circle {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading3"></div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading {
        position:relative;
        width: 1px;
        height: 1px;
        margin: 20px;
    }
    .loading:before, .loading:after {
        position:absolute;
        display:inline-block;
        width:30px;
        height:30px;
        content:"";
        border-radius:100%;
        background-color:#333333;
    }
    .loading:before {
        left:-30px;
        animation:ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2,0.68,0.18,1.08);
    }
    .loading:after {
        right:-30px;
        animation:ball-pulse infinite 0.75s cubic-bezier(0.2,0.68,0.18,1.08);
    }
    @keyframes ball-pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(0.1);
            opacity: 0.6;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading4">
                    <div></div>
                    <div></div>
                </div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading,.loading>div {
        position:relative;
        box-sizing:border-box;
    }
    .loading {
        display:block;
        font-size:0;
        color:#000000;
        width:32px;
        height:32px
    }
    .loading>div {
        display:inline-block;
        float:none;
        position:absolute;
        top:50%;
        left:50%;
        background:transparent;
        border-style:solid;
        border-width:2px;
        border-radius:100%;
        animation:ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
    }
    .loading>div:first-child {
        position:absolute;
        width:32px;
        height:32px;
        top:50%;
        left:50%;
        border-right-color:transparent;
        border-left-color:transparent;
    }
    .loading>div:last-child {
        width:16px;
        height:16px;
        border-top-color:transparent;
        border-bottom-color:transparent;
        animation-duration:0.5s;
        animation-direction:reverse;
    }
    @keyframes ball-clip-rotate-multiple-rotate {
        0% {
            transform:translate(-50%,-50%) rotate(0deg);
        }
        50% {
            transform:translate(-50%,-50%) rotate(180deg);
        }
        100% {
            transform:translate(-50%,-50%) rotate(360deg);
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading5">
                    <div></div>
                    <div></div>
                </div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading {
        display:block;
        font-size:0;
        color:#000000;
        width:32px;
        height:32px;
    }
    .loading,.loading>div {
        position:relative;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    .loading>div {
        display:inline-block;
        float:none;
        background-color:currentColor;
        border:0 solid currentColor;
        position:absolute;
        top:50%;
        left:50%;
        border-radius:100%;
    }
    .loading>div:first-child {
        position:absolute;
        width:32px;
        height:32px;
        background:transparent;
        border-style:solid;
        border-width:2px;
        border-right-color:transparent;
        border-left-color:transparent;
        animation:ball-clip-rotate-multiple-rotate 1s cubic-bezier(0.09,0.57,0.49,0.9) infinite;
    }
    .loading>div:last-child {
        width:16px;
        height:16px;
        animation:ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09,0.57,0.49,0.9) infinite;
    }
    @keyframes ball-clip-rotate-multiple-rotate {
        0% {
            transform:translate(-50%,-50%) rotate(0deg);
        }
        50% {
            transform:translate(-50%,-50%) rotate(180deg);
        }
        100% {
            transform:translate(-50%,-50%) rotate(360deg);
        }
    }
    @keyframes ball-clip-rotate-pulse-scale {
        0%, 100% {
            opacity:1;
            transform:translate(-50%,-50%) scale(1);
        }
        30% {
            opacity:0.3;
            transform:translate(-50%,-50%) scale(0.15);
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading6">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading {
        display:block;
        font-size:0;
        color:#333333;
        width:8px;
        height:8px;
    }
    .loading,loading>div {
        position:relative;
        box-sizing:border-box;
    }
    .loading>div {
        display:inline-block;
        float:none;
        background-color:currentColor;
        border:0 solid currentColor;
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        transform:translate(-50%,-50%);
        animation:ball-fussion-ball1 1s 0s ease infinite;
    }
    .loading>div:nth-child(1) {
        top:0;
        left:50%;
        z-index:1;
    }
    .loading>div:nth-child(2) {
        top:50%;
        left:100%;
        z-index:2;
        animation-name:ball-fussion-ball2;
    }
    .loading>div:nth-child(3) {
        top:100%;
        left:50%;
        z-index:1;
        animation-name:ball-fussion-ball3;
    }
    .loading>div:nth-child(4) {
        top:50%;
        left:0%;
        z-index:2;
        animation-name:ball-fussion-ball4;
    }
    @keyframes ball-fussion-ball1 {
        0% {
            opacity:0.35;
        }
        50% {
            top:-100%;
            left:200%;
            opacity:1
        }
        100% {
            top:50%;
            left:100%;
            z-index:2;
            opacity:0.35
        }
    }
    @keyframes ball-fussion-ball2 {
        0% {
            opacity:0.35;
        }
        50% {
            top:200%;
            left:200%;
            opacity:1
        }
        100% {
            top:100%;
            left:50%;
            z-index:1;
            opacity:0.35
        }
    }
    @keyframes ball-fussion-ball3 {
        0% {
            opacity:0.35;
        }
        50% {
            top:200%;
            left:-100%;
            opacity:1
        }
        100% {
            top:50%;
            left:0;
            z-index:2;
            opacity:0.35
        }
    }
    @keyframes ball-fussion-ball4 {
        0% {
            opacity:0.35;
        }
        50% {
            top:-100%;
            left:-100%;
            opacity:1
        }
        100% {
            top:0%;
            left:50%;
            z-index:1;
            opacity:0.35
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading7">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading,.loading>div {
        position: relative;
        box-sizing: border-box;
    }
    .loading {
        display: block;
        font-size: 0;
        color: #333333;
        width: 54px;
        height: 18px;
    }
    .loading>div {
        display:inline-block;
        float:none;
        background-color:currentColor;
        border:0 solid currentColor;
        width:10px;
        height:10px;
        margin: 4px;
        border-radius: 100%;
        animation: ball-pulse 1s ease infinite;
    }
    .loading>div:nth-child(1) {
        animation-delay: -200ms;
    }
    .loading>div:nth-child(2) {
        animation-delay: -100ms;
    }
    .loading>div:nth-child(3) {
        animation-delay: 0ms;
    }
    @keyframes ball-pulse {
        0%, 60%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        30% {
            opacity: 0.1;
            transform: scale(0.01);
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>
            <div class="columnCenterCenter loadingBoxContent">
                <div class="loading8">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="textBox">
                    <div class="text rowCenterCenter">查看源代码</div>
                </div>
                <div class="code">
                    <div class="title rowBetweenCenter">
                        <div class="font-20">loading源代码</div>
                        <svg t="1758681433934" class="icon close pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694" width="20" height="20"><path d="M512 391.304533L150.016 29.354667A85.1968 85.1968 0 0 0 29.2864 29.2864a85.162667 85.162667 0 0 0 0.034133 120.7296L391.304533 512 29.354667 873.984a85.1968 85.1968 0 0 0-0.034134 120.7296c33.553067 33.553067 87.381333 33.314133 120.7296-0.034133L512 632.695467 873.984 994.645333c33.553067 33.553067 87.381333 33.348267 120.7296 0.034134a85.162667 85.162667 0 0 0-0.034133-120.7296L632.695467 512 994.645333 150.016c33.553067-33.553067 33.348267-87.381333 0.034134-120.7296a85.162667 85.162667 0 0 0-120.7296 0.034133L512 391.304533z" fill="#000000" p-id="5695"></path></svg>
                    </div>
                    <div class="content">
                        <pre>
                            <code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .loading,.loading > div {
        position: relative;
        box-sizing: border-box;
    }
    .loading {
        display: block;
        font-size: 0;
        color: #333333;
        width: 32px;
        height: 32px;
    }
    .loading>div {
        display:inline-block;
        float:none;
        background-color:currentColor;
        border:0 solid currentColor;
        position: absolute;
        top: 50%;
        left: 50%;
        width:8px;
        height:8px;
        margin-top: -4px;
        margin-left: -4px;
        border-radius: 100%;
        animation: ball-spin 1s infinite ease-in-out;
    }
    .loading>div:nth-child(1) {
        top: 5%;
        left: 50%;
        animation-delay: -1.125s;
    }
    .loading>div:nth-child(2) {
        top: 18.1801948466%;
        left: 81.8198051534%;
        animation-delay: -1.25s;
    }
    .loading>div:nth-child(3) {
        top: 50%;
        left: 95%;
        animation-delay: -1.375s;
    }
    .loading>div:nth-child(4) {
        top: 81.8198051534%;
        left: 81.8198051534%;
        animation-delay: -1.5s;
    }
    .loading>div:nth-child(5) {
        top: 94.9999999966%;
        left: 50.0000000005%;
        animation-delay: -1.625s;
    }
    .loading>div:nth-child(6) {
        top: 81.8198046966%;
        left: 18.1801949248%;
        animation-delay: -1.75s;
    }
    .loading>div:nth-child(7) {
        top: 49.9999750815%;
        left: 5.0000051215%;
        animation-delay: -1.875s;
    }
    .loading>div:nth-child(8) {
        top: 18.179464974%;
        left: 18.1803700518%;
        animation-delay: -2s;
    }
    @keyframes ball-spin {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        20% {
            opacity: 1;
        }
        80% {
            opacity: 0;
            transform: scale(0);
        }
    }
&lt;/style&gt;
                            </code>
                        </pre>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script>
        window.addEventListener("DOMContentLoaded", () => {
            initialize(".app", true).then(() => {
                
                hljs.highlightAll();
                hljs.initLineNumbersOnLoad();
                document.querySelector(".h1").textContent = `纯 css + html 加载loading示例：共 ${document.querySelector(".loadingBox").children.length} 个`;
                const textBoxes = document.querySelectorAll('.textBox');
                const closeButtons = document.querySelectorAll('.close');
                textBoxes.forEach(function(textBox){
                    textBox.addEventListener("click", function(e){
                        e.stopPropagation();
                        const otherCode = document.querySelectorAll(".code");
                        otherCode.forEach(item => {
                            item.style.zIndex = '-1';
                            item.style.opacity = '0';
                        });
                        const loadingBox = textBox.closest('.loadingBoxContent');
                        if (!loadingBox) return;
                        const code = loadingBox.querySelector('.code');
                        if (!code) return;
                        const max = document.querySelectorAll(".loadingBoxContent");
                        max.forEach(item => {
                            item.classList.remove("solid");
                        });
                        loadingBox.classList.add("solid");
                        code.style.zIndex = '9999';
                        code.style.opacity = '1';
                    });
                });
                closeButtons.forEach(function (closeBtn) {
                    closeBtn.addEventListener('click', function (e) {
                        e.stopPropagation();
                        const loadingBox = closeBtn.closest('.loadingBoxContent');
                        if (!loadingBox) return;
                        const code = loadingBox.querySelector('.code');
                        if (!code) return;
                        const max = document.querySelectorAll(".loadingBoxContent");
                        max.forEach(item => {
                            item.classList.remove("solid");
                        });
                        code.style.zIndex = '-1';
                        code.style.opacity = '0';
                    })
                });
            }).catch(error => {
                alert(error,null,"error")
            })
        });
    </script>
</body>
</html>